import React, { useEffect } from "react";
import styles from "./festivalList.module.less";
import SvgIcon from "@components/SvgIcon";
import { connect } from "react-redux";
import {
    getFestivalListAction,
    removeFestivalAction,
    getFestivalAction,
    clearAllFestivalAction,
} from "@redux/actions02";
import moment from "moment";
import { Scrollbars } from "react-custom-scrollbars-2";

const FestivalList = (props) => {
    const {
        getFestivalListAction,
        removeFestivalAction,
        getFestivalAction,
        clearAllFestivalAction,
        list,
        festival,
        getFes,
        isReedit,
        n,
        getReedit,
        getN,
    } = props;

    useEffect(() => {
        getFestivalListAction();
    }, [getFestivalListAction]);

    useEffect(() => {
        festival && getFes(festival);
    }, [getFes, festival]);

    return (
        <div className={styles.festival_list}>
            <p className={styles.title}>自定义节日列表</p>
            <div
                className={styles.clear_all}
                onClick={() => {
                    clearAllFestivalAction();
                    getReedit(false);
                    getN(0);
                }}
            >
                清除全部节日
            </div>
            <div className={styles.main}>
                <Scrollbars autoHide>
                    <ul className={styles.list_ul}>
                        {list &&
                            list.map((item, index) => {
                                return (
                                    <li key={item.createTime}>
                                        <p className={styles.date}>
                                            <span>日期：</span>
                                            {item.m}月{item.d}日
                                        </p>
                                        <p className={styles.detail}>
                                            <span>详情：</span>
                                            {item.content}
                                        </p>
                                        <p className={styles.create_time}>
                                            <span>创建时间：</span>
                                            {moment(item.createTime).format(
                                                "YYYY-MM-DD HH:mm:ss"
                                            )}
                                        </p>
                                        <div
                                            className={styles.del}
                                            title="删除该条自定义"
                                            onClick={() => {
                                                removeFestivalAction(
                                                    item.createTime
                                                );
                                                getReedit(false);
                                                getN(0);
                                            }}
                                        >
                                            <SvgIcon font="icon-shanchu" />
                                        </div>
                                        {isReedit && n === item.createTime ? (
                                            <div
                                                className={styles.cancel_edit}
                                                title="取消重新编辑"
                                                onClick={() => {
                                                    getReedit(false);
                                                    getN(0);
                                                }}
                                            >
                                                <SvgIcon font="icon-quxiao" />
                                            </div>
                                        ) : (
                                            <div
                                                className={styles.edit}
                                                title="编辑该条自定义"
                                                onClick={() => {
                                                    getFestivalAction(
                                                        item.createTime
                                                    );
                                                    getReedit(true);
                                                    getN(item.createTime);
                                                }}
                                            >
                                                <SvgIcon font="icon-bianji1" />
                                            </div>
                                        )}
                                    </li>
                                );
                            })}
                    </ul>
                </Scrollbars>
            </div>
        </div>
    );
};

export default connect(
    (state) => ({
        list: state.festivalListReducer,
        festival: state.getOneFestivalReducer,
    }),
    {
        getFestivalListAction,
        removeFestivalAction,
        getFestivalAction,
        clearAllFestivalAction,
    }
)(FestivalList);
